<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #canvas {
      border: 1px solid #333;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="300" height="300"></canvas>
  <script>
    /* 1、设置个半径 50px */
    /* 2、50~100 */
    /* 3、
    increase  = true
    radius< 50  true  ++
    radius>100 false  --
     */
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d")
    let radius = 50;
    /* 设置是否放大 */
    let increase = true;
    function draw() {
      /* 1、设置圆radius=50 */
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      ctx.beginPath();
      ctx.arc(150, 150, radius, 0, Math.PI * 2)
      ctx.closePath();
      ctx.fillStyle = "#652e80";
      ctx.fill();
      if (radius > 100) {
        increase = false;
      } else if (radius < 50) {
        increase = true;
      }
      if (increase) {
        radius++;
      } else {
        radius--;
      }
    }
    setInterval(() => {
      draw()
    }, 50)
  </script>
</body>

</html>